<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col">
        <u-form>
          <u-form-item
            label="联系人"
            prop="realname"
            borderBottom
            ref="item1"
            labelWidth="80"
          >
            <u--input
              v-model="realname"
              border="none"
              placeholder="请输入联系人称呼"
            >
            </u--input>
          </u-form-item>
          <u-form-item
            label="联系号码"
            prop="mobile"
            borderBottom
            ref="item1"
            labelWidth="80"
          >
            <u--input
              v-model="mobile"
              border="none"
              type="number"
              placeholder="请输入联系手机号"
            >
            </u--input>
          </u-form-item>

          <view @click="showCity">
            <u-form-item
              label="服务地址"
              prop="addrname"
              borderBottom
              ref="item1"
              labelWidth="80"
            >
              <u--input
                v-model="addrname"
                border="none"
                placeholder="请选择所在位置"
                disabledColor="#FFFFFF"
              ></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </view>

          <u-form-item
            label="位置补充"
            prop="details"
            borderBottom
            ref="item1"
            labelWidth="80"
          >
            <u--input
              v-model="details"
              border="none"
              placeholder="尽量精确，楼栋、单元、房间号"
              disabledColor="#FFFFFF"
            >
            </u--input>
            <!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
          </u-form-item>
        </u-form>

        <view class="justify-between group_5">
          <text class="text_11">设为默认地址</text>
          <u-switch v-model="is_default" activeColor="#5ac725"></u-switch>
        </view>
      </view>

      <view class="flex-col group_6">
        <view
          class="flex-col items-center button"
          @tap.stop="onMultClick(save)"
        >
          <text>保存</text>
        </view>
        <view
          class="flex-col items-center button_1"
          @tap.stop="onMultClick(onCancel)"
          v-if="addressId"
        >
          <text>删除</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let _this;
export default {
  data() {
    return {
      city: "",
      realname: "",
      mobile: "",
      district: "",
      address: "",
      details: "",
      addrname: "",
      province: "",
      is_default: true,
      location: "",
      districts: "",
      addressId: "",
      lat: "",
      lng: "",
      initLocation: "",
      latitude: 113.012546,
      longitude: 28.199271,
      show: true,
      type: "",
      onClick: true,
    };
  },
  onLoad: function (options) {
    _this = this;

    this.addressId = options.id ? Number(options.id) : "";
    if (options.id) {
      uni.setNavigationBarTitle({
        title: "编辑地址",
      });
      this.init();
    } else {
      uni.setNavigationBarTitle({
        title: "添加地址",
      });
    }
    if (options.type) {
      this.type = options.type;
    }
  },
  onShow() {
    const map = uni.getStorageSync("map_tip");
    if (map) {
      const address = uni.getStorageSync("user_address");
      for (let i in address) {
        this[i] = address[i];
      }
      this.addrname = address.standard_address;
      uni.removeStorageSync("map_tip");
    }
  },
  methods: {
    init() {
      this.$http
        .post("api/address/details", {
          id: _this.addressId,
        })
        .then((res) => {
          // console.log("details-->", res);
          for (let i in res) {
            _this[i] = res[i];
          }
          _this.is_default = Boolean(_this.is_default);
          _this.districts = _this.district;
        });
    },
    showCity() {
      uni.navigateTo({
        url: "/pages/map/index?address=1",
      });
    },
    onCancel() {
      uni.showModal({
        title: "",
        content: "是否确认删除此地址？",
        success: (res) => {
          if (res.confirm) {
            this.$http
              .post("api/address/del", {
                id: this.addressId,
              })
              .then((res) => {
                uni.showToast({
                  icon: "success",
                  title: "删除成功",
                  success: (res) => {
                    uni.$emit("change", {
                      isUpData: true,
                    });
                    setTimeout(() => {
                      uni.navigateBack({
                        delta: 1,
                      });
                    }, 1000);
                  },
                });
              });
          }
        },
      });
    },
    async save() {
      if (!this.realname) {
        uni.showToast({
          icon: "none",
          title: "请输入联系人称呼",
        });
        return;
      }
      if (!this.mobile) {
        uni.showToast({
          icon: "none",
          title: "请输入联系手机号",
        });
        return;
      }
      if (!this.addrname) {
        uni.showToast({
          icon: "none",
          title: "请选择服务地址",
        });
        return;
      }
      if (!this.details) {
        uni.showToast({
          icon: "none",
          title: "请填写位置补充",
        });
        return;
      }

      // const res = uni.getStorageSync("user_address")
      let obj = {
        id: this.addressId || 0,
        realname: _this.realname,
        mobile: _this.mobile,
        province: _this.province,
        city: _this.city,
        district: _this.district,
        address: _this.address,
        details: _this.details,
        addrname: _this.addrname,
        is_default: Number(this.is_default),
        lat: _this.lat,
        lng: _this.lng,
      };
      var regurl = [obj.province, obj.city, obj.district];

      var reg = RegExp(regurl.join("|"), "g");
      obj.address = obj.address.replace(reg, "");
      // console.log('obj---》', obj);

      _this.$http.post("api/address/editAddress2", obj).then((res2) => {
        let title = _this.addressId ? "编辑成功" : "新增成功";
        uni.showToast({
          icon: "success",
          title,
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: #ffffff;
  width: 100%;
  height: 100vh;

  .group {
    padding: 0 30rpx 628rpx;
    flex: 1 1 auto;

    .group_6 {
      margin-top: 80rpx;
      padding-left: 66rpx;
      padding-right: 64rpx;

      .button {
        padding: 26rpx 0;
        color: rgb(255, 255, 255);
        font-size: 32rpx;
        font-weight: 500;
        line-height: 44rpx;
        white-space: nowrap;
        background-color: rgb(24, 181, 103);
        border-radius: 48rpx;
      }

      .button_1 {
        margin-top: 40rpx;
        padding: 26rpx 0;
        color: rgb(153, 153, 153);
        font-size: 32rpx;
        font-weight: 500;
        line-height: 44rpx;
        white-space: nowrap;
        background-color: rgb(244, 244, 244);
        border-radius: 48rpx;
      }
    }

    .group_2 {
      padding: 30rpx 2rpx 26rpx;
      border-bottom: solid 2rpx rgba(0, 0, 0, 0.06);

      .text_1 {
        color: rgb(0, 0, 0);
        font-size: 32rpx;
        font-weight: 500;
        line-height: 44rpx;
        white-space: nowrap;
      }

      .text_3 {
        color: rgb(80, 80, 80);
        font-size: 32rpx;
        line-height: 44rpx;
        white-space: nowrap;
      }

      .text_4 {
        margin-left: 96rpx;
      }

      .text_6 {
        margin-left: 64rpx;
      }
    }

    .group_3 {
      padding: 30rpx 2rpx 26rpx;
      border-bottom: solid 2rpx rgba(0, 0, 0, 0.06);
      position: relative;

      .text_7 {
        color: rgb(0, 0, 0);
        font-size: 32rpx;
        font-weight: 500;
        line-height: 44rpx;
        white-space: nowrap;
        position: absolute;
        left: 2rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .text_8 {
        color: rgb(80, 80, 80);
        font-size: 32rpx;
        line-height: 44rpx;
        white-space: nowrap;
      }
    }

    .group_4 {
      padding: 30rpx 2rpx 28rpx;
      border-bottom: solid 2rpx rgba(0, 0, 0, 0.06);

      .text_9 {
        color: rgb(0, 0, 0);
        font-size: 32rpx;
        font-weight: 500;
        line-height: 44rpx;
        white-space: nowrap;
      }

      .text_10 {
        margin-left: 64rpx;
        color: rgb(80, 80, 80);
        font-size: 32rpx;
        line-height: 44rpx;
        white-space: nowrap;
      }
    }

    .group_5 {
      padding: 24rpx 2rpx;
      color: rgb(0, 0, 0);
      font-size: 26rpx;
      font-weight: 500;
      line-height: 44rpx;
      white-space: nowrap;

      .text_11 {
        margin: 4rpx 0;
      }

      .switch {
        border-radius: 26rpx;
        width: 96rpx;
        height: 52rpx;
      }
    }
  }
}
</style>
